<template>
  <div class="create-post">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>发布新帖</h1>
        <p>分享您的养护经验或领养心得</p>
      </div>

      <!-- 发布表单 -->
      <el-card class="post-form-card">
        <el-form ref="postForm" :model="form" :rules="rules" label-width="100px">
          <!-- 帖子标题 -->
          <el-form-item label="帖子标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入帖子标题（5-50个字符）" show-word-limit maxlength="50"></el-input>
          </el-form-item>

          <!-- 帖子分类 -->
          <el-form-item label="帖子分类" prop="category">
            <el-select v-model="form.category" placeholder="请选择帖子分类">
              <el-option label="养护经验" value="养护经验"></el-option>
              <el-option label="领养心得" value="领养心得"></el-option>
              <el-option label="健康咨询" value="健康咨询"></el-option>
              <el-option label="训练技巧" value="训练技巧"></el-option>
              <el-option label="其他交流" value="其他交流"></el-option>
            </el-select>
          </el-form-item>

          <!-- 帖子内容 -->
          <el-form-item label="帖子内容" prop="summary">
            <div class="content-editor">
              <!-- 富文本编辑器 -->
              <quill-editor
                ref="myQuillEditor"
                v-model="form.summary"
                :options="editorOption"
              />
            </div>
          </el-form-item>
          <!-- 操作按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitPost" :loading="submitting">
              发布帖子
            </el-button>
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { publishRescue } from '@/api/forum'
import { mapGetters } from 'vuex'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'CreatePost',
  components: {
    quillEditor
  },
  data() {
    return {
      submitting: false,
      form: {
        avatar: '',
        userName: '',
        name: '',
        title: '',
        category: '',
        content: '',
      },
      editorOption: {
        theme: 'snow',
        placeholder: '请输入帖子内容...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image']
          ]
        }
      },
      rules: {
        title: [
          { required: true, message: '请输入帖子标题', trigger: 'blur' },
          { min: 5, max: 50, message: '标题长度在5到50个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择帖子分类', trigger: 'change' }
        ],
        summary: [
          { required: true, message: '请输入帖子内容', trigger: 'blur' },
          { min: 20, message: '内容至少20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    async submitPost() {
      this.$refs.postForm.validate(async (valid) => {
        if (!valid) return

        this.submitting = true
        try {
          this.form.userName = this.user.userName
          this.form.name = this.user.name
          this.form.avatar = this.user.avatar
          const response = await publishRescue(this.form)
          if (response.code === 200) {
            this.$message.success('帖子发布成功！')
            // 跳转到论坛首页或帖子详情页
            this.$router.push('/forum')
          }
        } catch (error) {
          this.$message.error('发布失败，请重试')
        } finally {
          this.submitting = false
        }
      })
    },

    goBack() {
      this.$router.push('/forum')
    }
  },

  mounted() {
  },
}
</script>

<style scoped>
:deep(.ql-container.ql-snow) {
  min-height: 300px !important;
}

.create-post {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 20px 0;
}

.post-form-card {
  padding: 30px;
}

.content-editor {
  border-radius: 4px;
}


.tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tag-item {
  margin: 0;
}

.tag-input {
  width: 90px;
}

.tags-tip {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
}
</style>